<script setup>
import { ref, onMounted } from "vue";
import { getAllCommentByAdmin, deleteCommentByAdmin } from "@/api/comment.js";

const commentList = ref();
const tableData = ref();
const loading = ref(true);
onMounted(async () => {
  loading.value = true;
  const res = await getAllCommentByAdmin();
  commentList.value = res.data.data;
  console.log(res.data.data);
});

// 删除用户
const deleteComment = async (id) => {
  // 提示用户是否要删除
  await ElMessageBox.confirm("此确认要删除该评论, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  await deleteCommentByAdmin(id);
  ElMessage.success("删除成功");
  //重新渲染
  getAllCommentByAdmin();
};
</script>

<template>
  <AdminNewsPage title="用户评论信息">
    <!-- 新闻列表 -->
    <el-table
      :data="commentList"
      style="width: 100%"
      max-height="565"
      row-key="commentId"
    >
      <el-table-column prop="commentId" label="评论id" width="150"></el-table-column>
      <el-table-column prop="parentId" label="父评论id" width="120"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="120"></el-table-column>
      <el-table-column prop="newsId" label="新闻id" width="120"></el-table-column>

      <el-table-column prop="commentTime" label="评论时间" width="120"></el-table-column>
      <el-table-column label="用户头像" width="200">
        <template #default="scope">
          <img :src="scope.row.userAvatar" alt="" style="width: 100%; height: 100px" />
        </template>
      </el-table-column>

      <el-table-column
        prop="commentContent"
        label="评论内容"
        width="1000"
      ></el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button type="danger" round @click="deleteComment(scope.row.commentId)"
            >删除评论</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑抽屉 -->
    <EditDrawer ref="articleEditRef"></EditDrawer>
  </AdminNewsPage>
</template>

<style scoped></style>
